<template>
	<view id="LNCrm">
		<view class="Lntop">
			<view class="head">
				<img src="../../static/Ln/h.png" alt="" class="heads"/>
			</view>
			<p id="userName">{{arr.userName}}</p>
			<p id="bu">{{arr.bu}}</p>
			<view class="disan">
				<view class="sna">
					<img src="../../static/Ln/tel.png" alt="" class="tttt"/>
				</view>
				<view class="sna">
					<img src="../../static/Ln/d.png" alt="" class="tttt"/>
				</view>
				<view class="sna">
					<img src="../../static/Ln/x.png" alt="" class="tttt"/>
				</view>
			</view>
		</view>
		<view class="xinxi">
			<p class="til">基本信息</p>
			<ul class="ulX">
				<li class="liX">
					<p class="oneer">性别</p>
					<p>{{arr.sex}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">生日</p>
					<p>{{arr.bir}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">邮箱</p>
					<p>{{arr.emi}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">手机</p>
					<p>{{arr.tel}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">微信</p>
					<p>{{arr.vx}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">座机/分机</p>
					<p>{{arr.zuo}}</p>
				</li>
			</ul>
			<p class="til">更多信息</p>
			<ul class="ulX">
				<li class="liX">
					<p class="oneer">工号</p>
					<p>{{arr.gong}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">籍贯</p>
					<p>{{arr.ji}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">毕业院校</p>
					<p>{{arr.school}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">毕业时间</p>
					<p>{{arr.bi}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">学历</p>
					<p>{{arr.xue}}</p>
				</li>		
				<li class="liX">
					<p class="oneer">所学专业</p>
					<p>{{arr.study}}</p>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:{}
			}
		},
		methods: {
			
		},
		onLoad(options) {
		  if (options.item) {
		    // arr是自己定义的空对象
		    this.arr = JSON.parse(options.item);
		    console.log(this.arr,"arr");
		  }
		},
	}
</script>

<style lang="scss">
#LNCrm{
	.Lntop{
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.head{
			width: 150rpx;
			height: 150rpx;
			background-color: white;
			margin-top: 40rpx;
			border-radius: 50%;
			padding: 20rpx;
			box-sizing: border-box;
			.heads{
				display: block;
				width: 100%;
				border-radius: 50%;
				height: 120rpx;
			}
		}
		#userName{
			margin: 40rpx 0 15rpx 0;
			font-weight: 700;
			font-size: 40rpx;
		}
		#bu{
			
		}
		.disan{
			display: flex;
			margin-top: 40rpx;
			justify-content: center;
			margin-bottom: 40rpx;
			.sna{
				margin: 0 30rpx;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				border: 1px solid black;
				border-radius: 50%;
				align-items: center;
				.tttt{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.xinxi{
		padding-bottom: 50rpx;
		background-color: #e4e4e4;
		.til{
			height: 100rpx;
			background-color: #e4e4e4;
			line-height: 100rpx;
			font-size: 26rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
		}
		.ulX{
			background-color: white;
			.liX{
				border-bottom: 1px solid #ccc;
				box-sizing: border-box;
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				.oneer{
					// margin-right: 100rpx;
					color: gray;
					width: 200rpx;
				}
			}
		}
	}
}
</style>
